<template>
  <canvas ref="bjsCanvas" width="800" height="800" />
</template>

<script setup>
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  HemisphericLight,
  MeshBuilder,
} from 'babylonjs'
// import { createScene } from '~/scenes/MyFirstScene'
const bjsCanvas = ref(null)

onMounted(() => {
  if (bjsCanvas.value) {
    createScene(bjsCanvas.value)
  }
})

const createScene = function (canvas) {
  const engine = new Engine(canvas)

  //这将创建一个基本的巴比伦场景对象（非网格）
  // This creates a basic Babylon Scene object (non-mesh)
  const scene = new Scene(engine)

  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    3,
    new Vector3(0, 0, 0)
  )
  camera.attachControl(canvas, true)

  const light = new HemisphericLight('light', new Vector3(0, 1, 0))

  const box = MeshBuilder.CreateBox('box', {})
  engine.runRenderLoop(() => {
    scene.render()
  })
  // return scene
}
</script>
